<template>
	<view class="container-inner">
		<view class="searchLetter touchClass">
			<view v-for="(item1, index1) in searchLetter" :key="index1" @click="clickLetter(item1.name)">{{item1.name}}</view>
		</view>
		<view>
			<block v-if="isShowLetter">
				<view class="showSlectedLetter">{{toastShowLetter}}</view>
			</block>
			<scroll-view scroll-y="true" :style="{'height': winHeight + 'px'}" :scroll-into-view="scrollTopId" :scroll-top="scrollTop">
				<ul class="ul">
					<li v-for="(item2, index2) in completeList" :key="index2" @click="bindCity(item2.city, item2.code)" class="li">{{item2.city}}</li>
				</ul>
				<view class="selectCity">
					<view class="hotcity-common">定位城市</view>
					<view class="thisCityName" @click="bindCity(city, currentCityCode)">{{city}}</view>
					<view class="hotcity-common">热门城市</view>
					<view :class="{'item_city': true, 'last' : index3 % 3 == 2}" v-for="(item3, index3) in hotcityList" :key="index3"
					 @click="bindCity(item3.city, item3.code)">{{item3.city}}</view>
				</view>
				<view class="selection" v-for="(item4, index4) in cityList" :key="index4">
					<view class="item_letter" :id="item4.initial">{{item4.initial}}</view>
					<view :class="{'item_city': true, 'last': index5 % 3 == 2 }" v-for="(item5, index5) in item4.dataInfo" :key="index5"
					 @click="bindCity(item5.city, item5.code)">{{item5.city}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		wxGetCityConfig
	} from "../../../apis/recruit/index.js";
	import dataFactory from "../../../utils/data-factory.js";
	import location from "../../../utils/location.js";

	export default {
		data() {
			return {
				searchLetter: [],
				showLetter: "",
				winHeight: 0,
				cityList: [],
				isShowLetter: false,
				scrollTop: 0, //置顶高度
				scrollTopId: "", //置顶id
				city: "定位中",
				currentCityCode: "",
				hotcityList: [],
				toastShowLetter: "",
				commonCityList: [{
						cityCode: 110000,
						city: "北京市"
					},
					{
						cityCode: 310000,
						city: "上海市"
					}
				],
				inputName: "",
				completeList: [],
				county: "",
				type: ""
			};
		},
		onLoad(option) {
			let _this = this;
			// 生命周期函数--监听页面加载
			var cityList = {};
			const searchLetter = dataFactory.searchLetter;
			const sysInfo = wx.getSystemInfoSync();

			const winHeight = sysInfo.windowHeight;
			const itemH = winHeight / searchLetter.length;
			let tempArr = [];
			wxGetCityConfig().then(res => {
				cityList = dataFactory.dataList(res.data.cityObj, res.data.cityObjs);
				searchLetter.map((item, index) => {
					let temp = {};
					temp.name = item;
					temp.tHeight = index * itemH;
					temp.bHeight = (index + 1) * itemH;
					tempArr.push(temp);
				});
				_this.winHeight = winHeight;
				_this.itemH = itemH;
				_this.searchLetter = tempArr;
				_this.hotcityList = res.data.hot_city;
				_this.cityList = cityList;
			});
			_this.getLocationFn();
			option.type && (_this.type = option.type);
		},
		methods: {
			clickLetter(showLetter) {
				this.toastShowLetter = showLetter
				this.isShowLetter = true
				this.scrollTopId = showLetter

				setTimeout(() => {
					this.isShowLetter = false
				}, 500);
			},
			//选择城市
			bindCity(city, code) {
				
				this.city = city;
				this.currentCityCode = code;
				this.scrollTop = 0;
				this.completeList = [];

				// appInstance.globalData.defaultCity = _this.city
				// appInstance.globalData.defaultCounty = ''

				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //-2为上一级页面
				if (this.type) {
					
					prevPage.$vm.locationPosition.city = city;
					prevPage.$vm.locationPosition.district = "";
					prevPage.$vm.locationPosition.street = "";
					prevPage.$vm.streetArray = [];
					// prevPage.$vm.getCityDetailFn();
				} else {
					prevPage.$vm.detail.city = city;
				}
				uni.navigateBack({
					delta: 1 // delta: 1返回上一级（A 页面）    delta: 2返回上两级
				});
			},
			//获取定位城市
			getLocationFn() {
				let _this = this;
				uni.getLocation({
					type: "wgs84",
					success(res) {
						const latitude = res.latitude,
							longitude = res.longitude,
							speed = res.speed,
							accuracy = res.accuracy;

						location(latitude, longitude)
							.then(res => {
								let city = res.data.result.address_component.city;
								_this.city = city;
							})
							.catch(err => {
								page.setData({
									currentCity: "获取定位失败"
								});
							});
					}
				});
			}
		}
	};
</script>

<style lang="less">
	.container-inner {
		display: flex;
		flex-direction: row-reverse;
	}

	.container {
		height: 100vh;
		overflow: hidden;
		padding-left: 30rpx;
	}

	input {
		text-align: center;
		font-size: 32rpx;
		padding: 5px;
	}

	.searchLetter {
		flex-shrink: 0;
		width: 30rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		color: #666;
	}

	.searchLetter {
		view {
			color: #E41805;
			padding-top: 12rpx;
			font-size: 20rpx;
			line-height: 20rpx;
		}
	}

	.touchClass {
		background-color: #fff;
		color: #fff;
		padding-top: 240rpx;
		padding-bottom: 16rpx;
	}

	.showSlectedLetter {
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 50%;
		left: 50%;
		margin: -100rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		font-size: 52rpx;
		z-index: 1;
	}

	.selection {
		width: calc(100vw - 60rpx);
		margin-top: 10rpx;
	}

	.item_letter {
		display: flex;
		margin: 40rpx 0 20rpx 0;
		height: 40rpx;
		align-items: center;
		font-size: 30rpx;
		color: #333;
	}

	.item_city {
		width: calc(33.3% - 40rpx);
		padding: 20rpx 10rpx;
		margin: 10rpx 30rpx 10rpx 0;
		display: inline-block;
		font-size: 24rpx;
		color: #333;
		background: #f8f8f8;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item_city.last {
		margin: 10rpx 0;
	}

	.hotcity-common {
		font-size: 30rpx;
		color: #333;
		margin: 30rpx 0;
	}

	.hotCity {
		padding-right: 50rpx;
		margin: auto;
	}

	.thisCityName {
		display: inline-block;
		border: 1rpx solid #E41805;
		border-radius: 8rpx;
		padding: 15rpx 0;
		font-size: 24rpx;
		color: #E41805;
		text-align: center;
		min-width: 149.5rpx;
		margin: 16rpx 0;
	}

	.thishotText {
		color: #fec240;
		font-size: 20rpx;
		margin: 0 !important;
	}

	.slectCity {
		border-color: #fec240 !important;
	}

	.slectCity view {
		color: #fec240 !important;
	}

	.weui-grid {
		padding: 10rpx 0;
		width: 200rpx;
		box-sizing: border-box;
		border: 1rpx solid #ececec;
		border-radius: 8rpx;
		background-color: white;
		margin: 8rpx 0;
	}

	.weui-grids {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.weui-grid__label {
		display: block;
		text-align: center;
		color: #333;
		font-size: 24rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.ul {
		display: block;
		color: grey;
		margin-left: 20rpx;
	}

	.li {
		display: block;
		font-weight: 100;
		font-size: 28rpx;
		padding: 16rpx 0;
	}

	input {
		background-color: #eee;
	}

	.input {
		padding: 16rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.county {
		display: flex;
		flex-wrap: wrap;
	}
</style>
